<template>
  <div class="preview">
    <div>
      <el-image :src="img.url" alt="" />
    </div>
    <div>
      <el-carousel height="60px" indicator-position="none" :autoplay="false">
        <el-carousel-item v-for="(items, index) in 1" :key="index">
          <div class="imgs">
            <el-image
              v-for="(img, index) in images"
              :src="img.url"
              :key="index"
              @mouseenter="switchImg(img)"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {},
    };
  },
  methods: {
    switchImg(img) {
      this.img = img;
    },
    load() {
      if (this.images && this.images.length > 0) {
        this.switchImg(this.images[0]);
      }
    },
  },
  updated(){
    
  },
  created() {
    this.load()
  },
  props: {
    images: Array,
  },
};
</script>

<style scoped>
.preview {
  margin: 0 auto;
  position: relative;
  height: 500px;
  width: 500px;
}

.preview > div:first-child {
  top: 0;
  height: 440px;
  text-align: center;
}

.preview > div:last-child {
  width: 100%;
  padding-top: 50px;
  height: 60px;
}

.preview > div:first-child > img {
  display: block;
  height: inherit;
}

.imgs {
  margin: 0 auto;
  width: 70%;
  height: 100%;
  position: relative;
  text-align: left;
}

.imgs .el-image {
  display: inline-block;
  position: relative;
  width: 60px;
  margin-left: 2px;
  margin-right: 2px;
  height: inherit;
  border-bottom: 1px gray solid;
}
</style>